<template>
	<view class="container">
		<!-- swiper轮播图 -->

		<my-swiper @clickSwiperItem="clickSwiper" :swiperList="swiperListValue" :height="'600rpx'"></my-swiper>

		<div class="goods-info">
			<div class="price">￥999</div>
			<div class="goods-title">华为荣耀MagicBook】荣耀MagicBook2019第三方Linux版14英寸轻薄窄边框笔记本电脑（AMD锐龙53500U8G512GFHDIPS）冰河银</div>
			<div class="goods-tag">
				<text>原价:1000.00</text>
				<text>库存:796</text>
				<text>销量:31</text>
			</div>
		</div>

		<div class="select-wrapper" @click="dialog.isShwoModel = true">
			<div class="select-title">
				已选择:
				<text>WIFI版</text>
			</div>
			<div class="select-move">></div>
		</div>

		<!-- //bottom Dialog 弹出框 -->
		<view class="bottomDialog">
			<my-dialog :isShowModel="dialog.isShwoModel" :height="dialog.height" :width="dialog.width" :position="dialog.position" @close="dialog_close">
				<view class="dialog-content">
					<!-- title标题 -->
					<view class="title">
						<div class="img"><image src="../../static/mayun.jpg" mode="scaleToFill"></image></div>
						<div class="dialog-desc">
							<div class="price">￥9999</div>
							<div class="info">
								<text style="margin-right: 20rpx;">重量:2.07kg</text>
								<text>编号:100101151515155</text>
							</div>
						</div>
					</view>
					<!-- category分类 -->
					<view class="category">
						<view class="cate-wrap" v-for="(item,index) in goods_cate" :key="index" >
							<div class="category-title">
								{{item.name}}
							</div>
							<div class="category-wrapper">
								<view  v-for="(cate,i) in item.attr" :key="i">
									<view class="item" :class="[cate.checked ? 'active': '']"  @click="selectShopCate(item,cate,i)" >
										{{cate.name}}
									</view>
								</view>
							</div>
						</view>
						
						<view class="input-wrap">
							<text>数量:</text>
							<view class="input-item">
								<input-number></input-number>
							</view>
						</view>
					 
					</view>
					
					<!-- 底部确定键 -->
					<view class="buts">
						<view class="add-gouwuche" @click="addgouwucheBtn()">
							加入购物车
						</view>
						<view class="liji-goumai" @click="goumaiBtn()">
							立即购买
						</view>
					</view>
					
				</view>
			</my-dialog>
		</view>


		<!-- 商品详情 -->


		<view class="goods-detail">
			<view class="goods-detail-title">
				————产品介绍————
			</view>
			<view class="goods-detail-content" style="background-color: #FFFFFF;">
				<image src="../../static/swiper/200.jpg" mode="scaleToFill"></image>
				<image src="../../static/swiper/200.jpg" mode="scaleToFill"></image>
				<image src="../../static/swiper/200.jpg" mode="scaleToFill"></image>
				<image src="../../static/swiper/200.jpg" mode="scaleToFill"></image>
				<rich-text :nodes="goodsInfo.description"></rich-text>
				<!-- {{goodsInfo.description}} -->
			</view>
		</view>

		<view class="goods-tuijian">
			<view class="goods-tuijian-title">
				————猜你喜欢————
			</view>
			<view class="goods-tuijian-content">
					<shop-wrapper :shopData="shopData" @clickItem="clickShopItem"></shop-wrapper>
			</view>
		</view>
		
		<!-- 返回顶部按妞 -->
		<view class="goback">
			<go-back @goback="clickGoback" :isshow="isshowGoback"></go-back>
		</view>
		<view class="dixian">
			<dixian titles="我到底了" ></dixian>
		</view>
	
		

		<!-- //底部购买客服 -->
		<view class="button-menu">
			<view class="cu-bar bg-white tabbar border shop">
				<button class="action" open-type="contact" @click="service">
					<view class="cuIcon-service text-green"><view class="cu-tag badge"></view></view>
					客服
				</button>
				<view class="action" @click="gouwuche">
					<view class="cuIcon-cart"><view class="cu-tag badge">99</view></view>
					购物车
				</view>
				<view class="btn-group">
					<button class="cu-btn bg-orange round shadow-blur" @click="addgouwucheBtn()">加入购物车</button>
					<button class="cu-btn bg-red round shadow-blur"  @click="goumaiBtn()">立即订购</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import mySwiper from '../../components/my-swiper/my-swiper.vue';
import myDialog from '../../components/my-dialog/my-dialog.vue'; //底部弹出框

import inputNumber from '../../components/input-number/input-number.vue' //加减输入框

import shopWrapper from '../../components/shop-wrapper/shop-wrapper.vue'  //猜你喜欢商品列表
import goBack from '../../components/go-back/go-back.vue'
import dixian from '../../components/dixian/dixian.vue'  //底线

export default {
	components: { mySwiper, myDialog, inputNumber, shopWrapper, dixian, goBack},
	data() {
		return {
			goods_id:'0',
			goodsInfo:{},
			swiperListValue: [], //轮播图数据
			
			dialog: {
				isShwoModel: false,
				width: '100%',
				height: '900rpx',
				position: 'bottom'
			},
			//分类列表
			goods_cate:[
				{id:1,name:'型号',attr:[{id:1,name:'2018款',checked:false},{id:2,name:'2019款',checked:false},{id:3,name:'2020款',checked:false}]},
				{id:2,name:'颜色',attr:[{id:1,name:'黑色',checked:false},{id:2,name:'红色',checked:false},{id:3,name:'绿色',checked:false}]}
			],
			//推荐商品
			shopData:[],
			isshowGoback:false,  //是否显示返回顶部
		};
	},
	onLoad(e) {
		console.log(e);
		if(e.id){
			this.goods_id = e.id;
		}
		//请求商品数据
		// this.getGooodsInfo()
		this.swiperListValue = this.$request.mock.swiperList; //获取轮播图数据
		// this.goodsInfo = 
		
		this.shopData = this.$request.mock.shopData;
	},
	//页面滚动
	onPageScroll(e){
		// console.log(e);
		 
		
		this.isShowGobackMenu(e) //显示返回顶部按钮
	},
	//下拉刷新
	onPullDownRefresh() {
		console.log('dd');
		
		setTimeout(function(){
			uni.stopPullDownRefresh()
		},1000)
	},
	//页面滚动到底部
	onReachBottom(){
		console.log('到底了');
		uni.showLoading({
			title:'数据加载中',
			mask:true
		})
		setTimeout( ()=>{
			uni.hideLoading()
			
			//模拟请求，数组拼接
			// this.shopData = this.shopData.concat(this.$request.mock.shopData)
		},2000)
	},
	methods: {
		//点击轮播图
		clickSwiper(e) {
			console.log(e);
			this.$request.msg(e.id + '');
		},
		//点击关闭
		dialog_close() {
			this.dialog.isShwoModel = false;
		},
		//点击商品详情分类
		selectShopCate(item,cate,index){
	 
			//先遍历 设置为false
			item.attr.map(item=>{
				 return item.checked = false
			})
			//当前选中的为true
			cate.checked = true
	 
   
		},
		//客服
		service(){
			this.$request.msg('客服service')
		},
		//购物车
		gouwuche(){
			this.$request.msg('购物车')
			uni.switchTab({
				url:'../shopping/shopping'
			})
		},
		//加入购物车
		addgouwucheBtn(){
			 this.dialog.isShwoModel = false
			 this.$request.msg('加入购物车')
			 
		},
		//立即购买
		goumaiBtn(){
			 this.dialog.isShwoModel = false
			 this.$request.msg('立即购买')
			 uni.redirectTo({
			 	url:'../goodsorders/goodsorders'
			 })
		},
		//猜你喜欢事件
		clickShopItem(e){
			this.$request.msg(e.title)
			setTimeout(function(){
				uni.pageScrollTo({
					duration:0,
					scrollTop:0
				})
			},1000)
		},
		
		
		//监听页面滚动距离，如果到800 就显示返回顶部按钮
		isShowGobackMenu(e){
		 
			if(e.scrollTop > 800){
				
				this.isshowGoback = true;
			}else{
				this.isshowGoback = false
			}
		},
		
		//点击返回顶部
		clickGoback(){
			console.log("点击了 返回顶部");
			uni.pageScrollTo({
				scrollTop:0,
				duration:400
			})
		},
		
		getGooodsInfo(){
			this.$request.api.goods.getGoodsInfo(this.goods_id).then(res=>{
				if(res.data.status == 200){
 
				}
			}).catch(err=>{
				
			})
		}
		
		
	}
};
</script>

<style>
	.container{
		margin-bottom: 200rpx;
	}
.button-menu {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}

.goods-info {
	padding: 40rpx;
	background-color: #ffffff;
}
.goods-info .price {
	font-size: 40rpx;
	color: red;
	font-weight: 700;
}
.goods-info .goods-title {
	font-size: 30rpx;
	color: #333;
	margin: 10rpx 0;
	font-weight: 600;
}
.goods-info .goods-tag {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 24rpx;
	color: #999;
}

.select-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 10rpx;
	background-color: #ffffff;
	height: 80rpx;
	padding: 0 40rpx;
	align-items: center;
}

.select-wrapper .select-title {
	color: #666666;
	font-size: 30rpx;
}
.select-wrapper .select-title text {
	color: #000000;
	font-weight: 600;
	margin-left: 40rpx;
}
.select-wrapper .select-move {
	font-size: 50rpx;
	color: #999999;
}

/* dialog 底部弹出层 */
.bottomDialog {
	/* display: none; */
}
.dialog-content {
	width: 100%;
	height: 100%;

	/* background-color: #0081ff; */
	padding:  0 40rpx;
	 
}

/* 头部logo图标 */
.dialog-content .title{
	display: flex;
	padding:  40rpx 0;
 
}
.dialog-content .title .img{
	 
	width: 160rpx;
	height: 160rpx;
	margin-right: 40rpx;
}
.dialog-content .title .img image{
	width: 100%;
	height: 100%;
}
.dialog-content .title .dialog-desc{
	align-self: center;
}
.dialog-content .title .dialog-desc .price{
	color: red;
	font-weight: 500;
	font-size: 40rpx;
}
.dialog-content .title .dialog-desc .info{
	font-size: 20rpx;
	color: #666666;
}


/* 中间商品分类 */
.dialog-content .category{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	overflow: scroll;
	height: 580rpx;

}

 
.dialog-content .category .category-title{
	width: 100%;
	
	margin-bottom: 20rpx;
	color: #000000;
	font-size: 30rpx;
	font-weight: 600;
}
.dialog-content .category .category-wrapper{
	width: 100%;
	 
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	 
}
.dialog-content .category .category-wrapper .item{
	padding: 10rpx 30rpx;
	margin: 10rpx 10rpx;
	border-radius: 30rpx;
	background-color: #efefef;
	border: 1px solid #EFEFEF;
	
	 
	 
	 
}
/* 选中效果 */
.dialog-content .category .category-wrapper .active{
	 
	border: 1px solid red;
	color: #FFFFFF;
	background-color: red;
}

.dialog-content .category  .input-wrap{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	margin-top: 20rpx;
	margin-bottom: 80rpx;
	 
}
.dialog-content .category text{
	font-size: 25rpx;
	color: #999999;
}
.dialog-content .category  .input-wrap{
	
}

.dialog-content  .category .cate-wrap{
	width: 100%;
	margin: 10rpx 0;
}

 

/* 商品详情start */
.goods-detail{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}
.goods-detail .goods-detail-title{
	align-self: center;
	margin: 20rpx 0;
}
.goods-detail .goods-detail-content{
 
}
.goods-detail .goods-detail-content image{
	width: 100%;
	
}


/* 猜你喜欢start */
.goods-tuijian{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}
.goods-tuijian .goods-tuijian-title{
	align-self: center;
	margin: 20rpx 0;
}
.goods-tuijian .goods-detail-content{
 
}
 






/* 底部确定取消按钮 */
.buts{
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
 
 
}
.buts>.liji-goumai,.add-gouwuche{
	flex: 1;
	padding: 10rpx 80rpx;
	background-color: #ff0000;
	border-radius: 30rpx;
	color: #ffffff;
	font-weight: 500;
	font-size: 25rpx;
	height: 60rpx;
	line-height: 45rpx;
	text-align: center;

	
}
.buts> .liji-goumai{
	background-color: #cfa748;
	margin-left: 30rpx;
}

</style>
